iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0
JavaScript

JavaScript 基礎:端開發的第一步系列 第 10

運用前九天內容

  • 分享至 

  • xImage
  •  

今天將通過實戰練習來鞏固前九天學習到的 JavaScript 基礎知識。涵蓋了變量、數據類型、條件語句、迴圈、邏輯運算符以及迭代器方法。

實戰項目:簡單的用戶註冊系統

我們將建立一個模擬的用戶註冊系統,該系統會檢查用戶的年齡和其他條件,並允許符合條件的用戶進行註冊。這個項目將結合前幾天學習到的基礎知識。

要求:

  1. 使用 prompt() 收集用戶的基本信息(如姓名、年齡和是否同意服務條款)。
  2. 使用條件語句和邏輯運算符檢查用戶是否符合註冊條件:
    • 年齡必須大於或等於 18 歲。
    • 必須同意服務條款。
  3. 使用迭代器方法來驗證註冊者的姓名,確保它不包含任何違禁字(可自訂違禁字列表)。
  4. 使用循環來允許用戶重試輸入信息,直到符合所有條件為止。
  5. 顯示成功或失敗的註冊結果。

步驟 1:收集用戶信息

使用 prompt() 來收集用戶的姓名、年齡以及是否同意服務條款:
let name = prompt("請輸入你的姓名:");
let age = parseInt(prompt("請輸入你的年齡:"));
let agree = confirm("你是否同意服務條款?");

步驟 2:檢查註冊條件

使用 if-else 語句來檢查用戶的年齡和是否同意服務條款:
if (age >= 18 && agree) {
console.log("註冊成功!");
} else {
console.log("註冊失敗:你必須年滿18歲並同意服務條款。");
}

步驟 3:使用迭代器方法檢查姓名

定義一個違禁字列表,並使用 some() 來檢查姓名是否包含違禁字:
let bannedWords = ["badword1", "badword2", "badword3"];
let isNameValid = !bannedWords.some(word => name.includes(word));

if (isNameValid) {
console.log("姓名有效。");
} else {
console.log("姓名包含違禁字,無法註冊。");
}

步驟 4:允許用戶重試

使用 while循環允許用戶在未達到註冊條件時重試:
while (age < 18 || !agree || !isNameValid) {
console.log("註冊失敗,請重新輸入資料。");

name = prompt("請重新輸入你的姓名:");
age = parseInt(prompt("請重新輸入你的年齡:"));
agree = confirm("你是否同意服務條款?");

isNameValid = !bannedWords.some(word => name.includes(word));
}

console.log("註冊成功!");

步驟 5:完成註冊

當用戶輸入的所有信息都符合條件時,顯示成功的訊息:
console.log(歡迎你,${name},你已成功註冊。);


上一篇
迭代器方法
下一篇
函數的定義與使用
系列文
JavaScript 基礎:端開發的第一步13
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言